<template>
  <div class="container">
    <h1>订单详情</h1>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #006EFF">患者信息</span>
      </div>
      <div class="content">
        <div class="item flex">
          <ul>
            <li>患者姓名</li>
            <li>赖尚荣</li>
          </ul>
          <ul>
            <li>就诊卡号</li>
            <li>5000909000</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>证件类型</li>
            <li>身份证号</li>
          </ul>
          <ul>
            <li>证件号码</li>
            <li>371890199507070909</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>微信昵称</li>
            <li>七尾Sam</li>
          </ul>
          <ul>
            <li>手机号码</li>
            <li>15678900988</li>
          </ul>
          <ul>
            <li>关系</li>
            <li>本人</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>就诊人地址</li>
            <li>北京市朝阳区**路**号**小区</li>
          </ul>
        </div>

      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span style="color: #006EFF">就诊信息</span>
      </div>
      <div class="content">
        <div class="item flex">
          <ul>
            <li>就诊医院</li>
            <li>北京市第一人民医院</li>
          </ul>
          <ul>
            <li>医院地址</li>
            <li>北京市大兴区**990号</li>
          </ul>
          <ul>
            <li>就诊科室</li>
            <li>小花内科-门诊3楼东区501</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>就诊医生</li>
            <li>赵马</li>
          </ul>
          <ul>
            <li>医生职称</li>
            <li>主任医师</li>
          </ul>
          <ul>
            <li>业务类型</li>
            <li>门诊缴费</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>费用类型</li>
            <li>西药费</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>费用明细</li>
          </ul>
        </div>

        <div class="item flex" />

      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span style="color: #006EFF">订单信息</span>
      </div>
      <div class="content">
        <div class="item flex">
          <ul>
            <li>订单总额</li>
            <li>600.00(元)</li>
          </ul>
          <ul>
            <li>支付方式</li>
            <li>就诊卡余额</li>
          </ul>
          <ul>
            <li>卡内余额</li>
            <li>2000.00(元)</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>订单状态</li>
            <li>已支付</li>
          </ul>
          <ul>
            <li>订单编号</li>
            <li>JF2020081900098</li>
          </ul>
          <ul>
            <li>取消时间</li>
            <li>2020-12-12 10:09:09</li>
          </ul>
        </div>

        <div class="item flex">
          <ul>
            <li>订单备注</li>
            <li>
              <el-input v-model="searchVal" placeholder="请输入内容" />
            </li>
          </ul>
        </div>

        <div class="item flex">
          <el-button type="primary">保存</el-button>
          <el-button type="primary" plain @click="quxiao()">取消</el-button>
        </div>

        <div class="item flex" />

      </div>
    </el-card>

  </div>
</template>

<script>
import { Delete, detail, getRoleList, save } from '@/api/role'

export default {
  data() {
    return {
      id: '',
      searchVal:""
    }
  },
  mounted() {
    this.init()
  },
  methods: {

    quxiao() {
      this.$router.go(-1)
      //this.$router.push({ path: '/expense/outpatientConsumption', query: { id: id }})
    },
    // 初始化
    init() {
      // 获取参数id
      const id = this.$route.query.id
      this.id = id
      console.log(id)
    }
  }
}
</script>

<style scoped>
.flex{
  display: flex;
  display: -webkit-flex;
}
.item{
  gap: 80px;
}
ul{
  display: flex;
}
 ul,li{
   list-style: none;
 }
 ul li:first-child{
   color: #AAAAAA;
   margin-right: 20px;
 }
 /deep/.el-card__header{
   background: rgba(242, 242, 242, 1);
 }



</style>
